import { FC, useEffect, useState } from "react";
import classnames from "classnames";
import styles from "./index.module.scss";

interface IProps {
  setCurrentPage(value: number): void;
  currentPage: number; // 当前页
  pageCount: number; // 总数量
  pageSize: number; // 每页数量
}
const Pagination: FC<IProps> = (props) => {
  const [pageArr, setPageArr] = useState<number[]>([]);
  const { currentPage, pageCount, pageSize, setCurrentPage } = props;
  const initPagination = () => {
    const total = Math.ceil(pageCount / pageSize);
    const arr = [];
    for (let i = 0; i < total; i++) {
      arr.push(i + 1);
    }
    setPageArr(arr);
  };
  const handleprev = () => {
    const value = currentPage;
    setCurrentPage(value - 1);
  };
  const handlenext = () => {
    const value = currentPage;
    setCurrentPage(value + 1);
  };
  const handleCurrent = (value: number) => {
    setCurrentPage(value);
  };
  useEffect(() => {
    return () => {
      initPagination();
    };
  }, [pageSize, currentPage]);

  return (
    <div className={styles.Pagination}>
      {currentPage > 1 ? (
        <div className={styles.prev} onClick={() => handleprev()}>
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
          >
            <path d="M461.994667 512l181.034666 181.034667a42.666667 42.666667 0 1 1-60.330666 60.330666l-211.2-211.2a42.666667 42.666667 0 0 1 0-60.330666l211.2-211.2a42.666667 42.666667 0 1 1 60.330666 60.330666L461.994667 512z"></path>
          </svg>
        </div>
      ) : (
        ""
      )}
      {pageArr.map((it, index) => {
        return (
          <div
            className={classnames(
              currentPage == it ? styles.currentpaginItem : "",
              styles.paginItem
            )}
            key={index}
            onClick={() => handleCurrent(it)}
          >
            {it}
          </div>
        );
      })}
      {currentPage < 10 ? (
        <div className={styles.next} onClick={() => handlenext()}>
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
          >
            <path d="M461.994667 512l181.034666 181.034667a42.666667 42.666667 0 1 1-60.330666 60.330666l-211.2-211.2a42.666667 42.666667 0 0 1 0-60.330666l211.2-211.2a42.666667 42.666667 0 1 1 60.330666 60.330666L461.994667 512z"></path>
          </svg>
        </div>
      ) : (
        ""
      )}
    </div>
  );
};

export default Pagination;
